<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel Upload and Parse</title>
</head>
<body>

<h2>Excel 计算</h2>

<!-- 文件上传输入 -->
<input type="file" id="excelFile" accept=".xlsx, .xls"/>

<!-- 解析按钮 -->
<button onclick="parseExcel()">解析Excel</button>

<!-- 文本框用于显示解析结果 -->
<textarea id="output" rows="10" cols="50" placeholder="解析结果将显示在这里..."></textarea>

<script>
    // 解析Excel的函数
    function parseExcel() {
        // 获取文件输入元素
        var fileInput = document.getElementById('excelFile');
        var file = fileInput.files[0];

        // 检查是否选择了文件
        if (!file) {
            alert('请先选择一个Excel文件！');
            return;
        }

        // 创建FormData对象，用于发送文件
        var formData = new FormData();
        formData.append('file', file);

        // 使用XMLHttpRequest发送文件到服务器
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload', true); // '/upload' 是后端处理上传文件的URL

        // 设置请求完成的回调函数
        xhr.onload = function () {
            if (xhr.status === 200) {
                // 请求成功，将解析结果设置到文本框中
                var responseText = xhr.responseText.slice(1, -1); // 移除字符串首尾的 {} 字符

                // 将字符串分割成数组
                var lines = responseText.split(', ');
                // 将数组转换为对象数组，以便进行排序
                var sortable = lines.map(function (line) {
                    var parts = line.split('=');
                    return {
                        name: parts[0] || 'null', // 如果是null，则将其转换为字符串'null'
                        count: parseInt(parts[1], 10) // 将字符串转换为整数
                    };
                });
                // 根据数量进行降序排序
                sortable.sort(function (a, b) {
                    return b.count - a.count;
                });
                // 将排序后的对象数组转换回字符串，并添加换行符
                var sortedText = sortable.map(function (item) {
                    return item.name + '=' + item.count; // 将对象转换回字符串
                }).join('\n'); // 使用换行符连接字符串
                // 将格式化后的文本设置到文本框中
                document.getElementById('output').textContent = sortedText;
                // console.log(sortedText);
            } else {
                // 请求失败，显示错误信息
                alert('解析失败：' + xhr.statusText);
            }
        };

        // 发送FormData对象
        xhr.send(formData);
    }
</script>

</body>
</html>
